﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>坐标设置</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- jqGrid组件基础样式包-必要 -->
	    <link href="js/jsgrid/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
        <link href="js/jsgrid/css/font-awesome.css?v=4.4.0" rel="stylesheet" />
<!--    <link href="js/jsgrid/css/style.css" rel="stylesheet" />-->

        <!-- jqgrid-->
        <link href="js/jsgrid/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet" />
        <link href="js/jsgrid/css/animate.css" rel="stylesheet" />
<!--        <link href="js/jsgrid/css/style.css?v=4.1.0" rel="stylesheet" />-->
    <!-- 全局js -->
        <script src="js/jsgrid/js/bootstrap.min.js?v=3.3.6"></script>
        <!-- Peity -->
        <script src="js/jsgrid/js/plugins/peity/jquery.peity.min.js"></script>
        <!-- jqGrid -->
        <script src="js/jsgrid/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
        <script src="js/jsgrid/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <!--jsgrid-->
<!-- <script src="js/tablejsgrid.js"></script> -->
<script src="js/login1.js"></script>
<link href="css/alllayer.css" rel="stylesheet" />
</head>
<body id="setpoint">
    <div class="tab">
        <ul class="nav">
        	<li><a href="setpeople.html">人员审核</a></li>
            <li><a class="liactive" href="#">坐标查看</a></li>
            <li><a href="setwatch.html">值班信息</a></li>
        </ul>
    </div>
    <div class="layertop">
        <button>导 出</button>
       <!--  <button>批量删除</button>
        <button>新 增</button> -->
        <input type="text" class="searchtext" value="" placeholder="请输入要查找内容" />
        <button class="search" onclick="Search()">查 找</button>
    </div>
    <div class="jqGrid_wrapper">
        <table id="list1"></table> 
		<div id="pager1"></div>
    </div>
    <div id="modifyform" title="修改城市资料" style="display:none;">  <!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 -->
        <p>城市编号：<input type="text" id="txtCityCode" /></p>
        <p>城市名称：<input type="text" id="txtCityName" /></p>
        <p>所属省份编号：<input type="text" id="txtFID" /></p>
    </div>

</body>
</html>
<script>

	$(function(){
		$.jgrid.defaults.styleUI = 'Bootstrap';
	    // Examle data for jqGrid1
	    
	    var pointdata={};
	    
	    $.ajax({
			async:false, //同步骤执行，即从后台获取json数据以后才本地装载jqgrid数据
			cache:false,
			type:'POST',
			dataType:"json",
		//	contentType: 'application/json; charset=utf-8',//设置编码格式
		//	url:"<%=request.getContextPath()%>"+"/cn/gw/web/action/PeopleAction_list.action",	
			url:"PointAction_list.action",
			error:function() {
				alert("查询失败。");
				
			},
			success:function(data) {
				
			    pointdata= data;
			}
		});
	    
	    // Configuration for jqGrid Example 1
	    $("#setpoint #list1").jqGrid({
	        data: pointdata,
	        datatype: "local",
	        //url:"../data/setpoint",
	        //datatype: "json",
	        height: "",
	        autowidth: true,
	        shrinkToFit: true,
	        rowNum: 10,
	        rowList: [10, 20, 30],
	        colNames: ['办公室室ID','建筑名称', '建筑地址', '经度', '纬度', '负责人', '联系方式'],
	        colModel: [
				{
 	   				name: 'id',
 				    index: 'id',
  				    width: 10,
				    sortable: false,
				    hidden: true,
				    key:true
				},
	            {
	                name: 'name',
	                index: 'name',
	                width: 30,
	                sorttype: "string"
	            },
	            {
	                name: 'addr',
	                index: 'addr',
	                width: 30,
	                sorttype: "int",
	                formatter: "int"
	            },
	            {
	                name: 'lng',
	                index: 'lng',
	                width: 10
	            },
	            {
	                name: 'lat',
	                index: 'lat',
	                width: 10
	            },
	            {
	            	name: 'people',
	                index: 'people',
	                width: 10,
	                sortable: false
	            },
	            {
	            	name: 'phone',
	                index: 'phone',
	                width: 10,
	                sortable: false
	            }
	        ],
	        pager: "#pager1",
	        viewrecords: true,
	        caption: "",
	        add: true,
	        edit: true,
	        addtext: 'Add',
	        edittext: 'Edit',
	      //  multiselect:true,//复选框
	        hidegrid: false,
	       /*  gridComplete:function(){  //在此事件中循环为每一行添加修改和删除链接
	            var ids=jQuery("#list1").jqGrid('getDataIDs');
	            for(var i=0; i<ids.length; i++){
	                var id=ids[i];   
	                modify = "<a href='#' style='color:#f60' onclick='Modify(" + id + ")'>修改</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)
	                del = "<a href='#'  style='color:#f60' onclick='Delete(" + id + ")' >删除</a>";   
	                jQuery("#list1").jqGrid('setRowData', ids[i], { Modify: modify, Delete: del });
	            }
	        },
	        //ondblClickRow 双击字段描述列可编辑，编辑完毕按Enter就保存在页面上了               
	        ondblClickRow: function (id) {
	            if (id && id !== lastsel) {
	                jQuery('#list1').jqGrid('restoreRow', lastsel);
	                jQuery('#list1').jqGrid('editRow', id, true);
	                lastsel = id;
	            }
	        }, */
	        editurl: "JqGridHandler.ashx?sign=singleEdit"//这个文件需要有，但里面无需写任何处理代码 
	    });
	});

	 //搜索
    function Search() {
        var _key = "";
        var searchtext = $(".searchtext").val();
        _key = searchtext;
        if (searchtext.length <= 0) {
            loaddataA(0,'');
            alert("请输入查找内容");
            return;
        } else {
            loaddataA(1, _key);
        }
    };
	
</script>
